<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：生命周期</h1>
            <h3>vue的生命周期指的是vue实例从创建、运行到摧毁的整个过程。包括各个阶段及其对应的生命周期函数
                这些生命周期函数是运行在特定阶段的钩子函数，让开发者能够根据需要在各个阶段执行特定的操作
            </h3>
            <img src="./生命周期.png" alt="">
            <h3>初始化阶段：vue实例将进行数据、事件、观察者等的初始化，对应的钩子函数:beforeCreate和created</h3>
            <h3>挂载阶段:Vue实例将编译模版生成虚拟的DOM,并将其挂载到实际的DOM上:对应的钩子函数,对应的钩子函数：beforeMount和Mounted</h3>
            <h3>更新阶段:当数据发生变化的时候，|Vue实例将重新渲染页面，|钩子函数:beforeUpdate和updated</h3>
            <h3>销毁阶段:vue实例将清理分配的资源，如计时器和监听器等,钩子函数：beforeUnmounted和unmounted</h3>
            <h3>1.beforeCreate:这个函数在Vue实例被创建之初就被调用,此时组件的数据还未初始化，也无法访问到props和data属性。
                可以在此函数中进行一些组件的初始化设置，如设置全局变量，事件监听等。
            </h3>
            <h3>2.created:在Vue实例创建完成，数据已经初始化之后就会被调用。此时组件可以访问到props和data属性。
                在此函数中，可以进行一些异步请求、事件监听器的注册等操作。
            </h3>
            <h3>3.beforeMount:在Vue实例挂载到DOM之前调用。
                在此阶段，Vue实例已经生成了一个虚拟DOM，并且将要被渲染到实际的DOM元素上。
                在此函数中，可以进行一些DOM的相关操作，譬如获取DOM节点、计算样式等</h3>
            <h3>4.mounted:在Vue实例挂载到DOM后调用。此时，Vue实例已经被渲染到了实际的DOM元素上，
                可以访问到DOM节点和计算后的样式。在此函数中，可以进行一些非响应式的DOM操作，例如第三方库的集成。
            </h3>
            <h3>5.beforeUpdate:在Vue实例更新之前调用。在此阶段，组件的数据已经发生了变化。但是DOM节点还没有被重新渲染
                在此函数中，可以进行一些组件的准备工作，例如计算DOM节点的相关属性。
            </h3>
            <h3>6.updated:在vue实例更新完成后调用。在此阶段，组件的数据发生了变化，也已经重新渲染了DOm节点。
                在此函数中，可以进行一些非响应式的DOM操作。
            </h3>
            <h3>7.beforeUnmounted:在vue实例卸载之前调用。在此阶段，组件即将被销毁，可以进行一些清理操作。
                例如取消事件监听器和定时器等
            </h3>
            <h3>unmounted:在Vue实例卸载之后调用，在此阶段，组件已经被销毁，无法访问到组件实例和DOm元素。
                可以在这个函数中，进行一些资源的释放和清理工作。
            </h3>
            {{message}}
            <input type="text" @change="change()" value="修改数据">
    </div>
</body>
</html>
<script>
    const appConn=Vue.createApp({
        data(){
            return{
                message:'你好，前段'
            }
        },
        methods:{
            change(){
                this.message='你好，后端'
            }
        },
        beforeCreate() {
            console.group('=====beforeCreate=====');
            console.log("el:"+this.$el);
            console.log("message:"+this.message);
            console.groupEnd('=====beforeCreate=====');
        },
        created(){
            console.group('=====created=====');
            console.log("el:"+this.$el);
            console.log("message:"+this.message);
            console.groupEnd('=====created=====');
        },
        beforeMount() {
            console.group('=====beforeMount=====');
            console.log("el:"+this.$el);
            console.log("message:"+this.message);
            console.groupEnd('=====beforeMount=====');
        },
        mounted() {
            console.group('=====mounted=====');
            console.log("el:"+this.$el);
            console.log("message:"+this.message);
            console.groupEnd('=====mounted=====');
        },
        beforeUpdate() {
            console.group('=====beforeUpdate=====');
            console.log("el:"+this.$el);
            console.log("message:"+this.message);
            console.groupEnd('=====beforeUpdate=====');
        },
        updated() {
            console.group('=====updated=====');
            console.log("el:"+this.$el);
            console.log("message:"+this.message);
            console.groupEnd('=====updated=====');
        },
    }).mount('#app')
    
</script>